<script setup>
import * as echarts from 'echarts'
import request from "@/utils/request";
import {onMounted, ref} from "vue";

//绘制左上角区域(病虫害分布)
function drawTopLeft(mData){
  let chartDom = document.getElementById('top-left');
  let myChart = echarts.init(chartDom);
  let option = {
    title: {
      text: '水稻患病分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    legend: {
      orient: 'vertical',
      left: 'right',
      padding: [
        50,  // 上
        0, // 右
        0,  // 下
        0, // 左
      ]
    },
    series: [
      {
        name: currentSelectVal.value === 0 ? "全部水稻患病分布" : months[currentSelectVal.value-1] + '水稻患病分布',
        type: 'pie',
        radius: '63%',
        data: mData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  myChart.setOption(option);

}
//初始化获取左上角区域的所需数据
function getTopLeftData(){
  getAllMonthData()//默认是该年全部月份的数据
}
//获取不同月份的左上角区域的数据
function getAllMonthData(){
  request.get("http://localhost:8090/user/analyze/getAllRiceDataByUid")
      .then(res=>{
        if(res.data.code === 200){
          drawTopLeft(res.data.data)
        }
      })
      .catch(err=>{
        console.log(err)
      })
}
function getMonthData(month){
  request.get("http://localhost:8090/user/analyze/getSingleMonthRiceDataByUid",{
    params:{month:month}
  })
      .then(res=>{
        if(res.data.code === 200){
          drawTopLeft(res.data.data)
        }
      })
      .catch(err=>{
        console.log(err)
      })
}

//绘制右上角区域(病虫害检测功能使用次数统计)
function drawTopRight(mData){
  let chartDom = document.getElementById('top-right');
  let myChart = echarts.init(chartDom);
  let option = {
    title: {
      text: '病虫害检测功能使用分布',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      // prettier-ignore
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} 次'
      },
      axisPointer: {
        snap: true
      }
    },
    series: [
      {
        name: '使用次数',
        type: 'line',
        smooth: true,
        data: mData,
      }
    ]
  };
  myChart.setOption(option)
}
//初始化获取右上角区域的所需数据
function getTopRightData(){
  request.get("http://localhost:8090/user/analyze/getAllUploadCountByUid")
      .then(res=>{
        if(res.data.code === 200){
          drawTopRight(res.data.data)
        }
      })
      .catch(err=>{
        console.log(err)
      })
}

//绘制底部区域
function drawBottom(mData){
  let chartDom = document.getElementById('bottom');
  let myChart = echarts.init(chartDom);
  let option = {
    title: {
      text: '每月病害分布曲线'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ["健康", "细菌性枯萎病", "细菌性条斑病", "劣种", "褐斑病", "稻瘟病", "稻粒黑粉病", "鞘腐病", "三种化学蛀茎虫", "蓟马", "飞虱"]
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '健康',
        type: 'line',
        stack: 'Total',
        data: mData[0]
      },
      {
        name: '细菌性枯萎病',
        type: 'line',
        stack: 'Total',
        data: mData[1]
      },
      {
        name: '细菌性条斑病',
        type: 'line',
        stack: 'Total',
        data: mData[2]
      },
      {
        name: '劣种',
        type: 'line',
        stack: 'Total',
        data: mData[3]
      },
      {
        name: '褐斑病',
        type: 'line',
        stack: 'Total',
        data: mData[4]
      },
      {
        name: '稻瘟病',
        type: 'line',
        stack: 'Total',
        data: mData[5]
      },
      {
        name: '稻粒黑粉病',
        type: 'line',
        stack: 'Total',
        data: mData[6]
      },
      {
        name: '鞘腐病',
        type: 'line',
        stack: 'Total',
        data: mData[7]
      },
      {
        name: '三种化学蛀茎虫',
        type: 'line',
        stack: 'Total',
        data: mData[8]
      },
      {
        name: '蓟马',
        type: 'line',
        stack: 'Total',
        data: mData[9]
      },
      {
        name: '飞虱',
        type: 'line',
        stack: 'Total',
        data: mData[10]
      }
    ]
  };
  myChart.setOption(option)
}
//初始化获取x底部区域的所需数据
function getBottomData(){
  request.get("http://localhost:8090/user/analyze/getAllMonthRiceDataByUid")
      .then(res=>{
        if(res.data.code === 200){
          drawBottom(res.data.data)
        }
      })
      .catch(err=>{
        console.log(err)
      })
}

//挂载成功时获取数据并展示图标
onMounted(()=>{
  getTopLeftData()
  getTopRightData()
  getBottomData()
})

let months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
let currentSelectVal = ref(0)
function onSelectChanged(val){
  console.log(val)
  if(val === 0){
    getAllMonthData()
  }
  else{
    getMonthData(val)
  }
}
</script>

<template>
  <el-container class="box">
    <el-container class="top">
      <el-container class="top-left">
        <div id="top-left"></div>
        <el-select
            v-model="currentSelectVal"
            placeholder="选择月份查看患病分布"
            size="default"
            style="width: 100px; position:absolute; left: 10px"
            default-first-option
            @change="onSelectChanged"
        >
          <el-option
              label="全部"
              :value="0"
          />
          <el-option
              v-for="(d,idx) in months"
              :key="d"
              :label="d"
              :value="idx+1"
          />
        </el-select>
      </el-container>
      <el-container class="top-right">
        <div id="top-right"></div>
      </el-container>
    </el-container>
    <el-container class="bottom">
      <div id="bottom"></div>
    </el-container>
  </el-container>
</template>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 50%;

}
.top-left {
  position: relative;
  width: 50%;
  height: 100%;
}
#top-left {
  width: 100%;
  height: 100%;
}
.top-right {
  width: 50%;
  height: 100%;
}
#top-right {
  width: 100%;
  height: 100%;
}
.bottom {
  width: 100%;
  height: 50%;
}
#bottom {
  width: 100%;
  height: 100%;
}

</style>